<template>
  <div id="app" class="appContent">
    <!-- 这是header -->
    <header id="header" class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" 
      v-show="goBackbtn" @click = "goBack"></a>
      <h1 class="mui-title">安师-生活</h1>
    </header>
    <!-- 内容区域 -->
    <div class="mui-content">
      <transition>
        <keep-alive include="newslist,imagelist">
           <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <!-- 这是footer -->
    <div class="foot">
      <nav class="mui-bar mui-bar-tab">
        <router-link to="/home" class="mui-tab-item" href="#tabbar">
          <span class="mui-icon mui-icon-home"></span>
          <span class="mui-tab-label">首页</span>
        </router-link>
        <router-link to="/home/goodlist" class="mui-tab-item" href="#tabbar-with-chat">
          <span class="mui-icon mui-icon-extra mui-icon-extra-class">
            <!-- <span class="mui-badge">9</span> -->
          </span>
          <span class="mui-tab-label">商城</span>
        </router-link>
        <!-- <router-link to="/find" class="mui-tab-item" href="#tabbar-with-contact">
          <span class="mui-icon mui-icon-extra mui-icon-extra-find"></span>
          <span class="mui-tab-label">发现</span>
        </router-link> -->
        <router-link to="/cart" class="mui-tab-item" href="#tabbar-with-map">
          <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
            <span class="mui-badge">{{this.$store.getters.getTotalCount}}</span>
          </span>
          <span class="mui-tab-label">购物车</span>
        </router-link>
        <!-- <router-link to="/mine" class="mui-tab-item" href="#tabbar-with-map">
          <span class="mui-icon mui-icon-contact"></span>
          <span class="mui-tab-label">我的</span>
        </router-link> -->
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      goBackbtn:false //用来标记是否回退按钮
    }
  },
  created(){
    if(this.$route.path == '/home'){
         this.goBackbtn = false
       }else{
         this.goBackbtn = true
       }
  },
  methods:{
    goBack(){
      this.$router.go(-1);  //回退路由
    }
  },
  watch:{
    '$route.path':function(newValue){
       if(newValue == '/home'){
         this.goBackbtn = false
       }else{
         this.goBackbtn = true
       }
    }
  }
};
</script>

<style lang="less">
.appContent {
  .mui-bar-nav {
    background-color:  #F97794;
    // background-color: pink;
    h1 {
      color:rgb(226, 87, 87);
      font-weight: bold;
    }
  }
  
  .mui-bar-tab {
    background-color:  #623AA2;
    // background-color: skyblue;
    .router-link-active {
      color: red;
    }
  }
  .mui-content {
    overflow: hidden;
  }
  .v-enter {
    transform: translate(400px);
  }
  .v-leave-to {
    position: absolute;
    transform: translate(-400px);
    }
  .v-enter-active,
  .v-leave-active {
    transition: all 0.5s;
  }
}
</style>
